<!DOCTYPE html>
<html>
<head>
    <title>提交订单</title>
    <meta charset="utf-8">
    <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="../javascripts/jquery-1.12.2.min.js"></script>
    <script src="/javascripts/bootstrap.min.js" type="text/javascript"></script>
    <% include ../includes/head%>
    
    <style type="text/css">
        .cart-heading{
            height: 40px;
            background-color: #EFEDED;
        }
        .cart-body{
            background-color: #F7F7F7;
        }
        .cart-body ul li {
            list-style-type: none;
            margin-left: -30px;
            width: 870px;
        }
        .cart-body ul li div{
            float: left;
            height: 80px;
        }
        .li-checkbox input{
            margin: 20px 5px 0 0;
        }
        .li-img a img{
            width: 40px;
            height: 50px;
        }
        .li-content{
            margin: 20px 0 0 30px;
            width: 280px;
        }
        .li-price{
            margin: 20px 0 0 60px;
            width: 100px;
        }
        .li-quantity{
            margin: 20px 0 0 130px;
            width: 100px;
        }
        .li-del{
            margin: 20px 0 0 30px;
            width: 50px;
        }
        .li-img{
            margin: 0 0 0 10px;
        }
    </style>
</head>
<body>
<% include ../includes/header%>

<div id="container-inner">
        <ul id="breadcrumb-wrapper">
        
            <li>
                <a href="index.html">
                <ins>
                    <div class="br-left"></div>
                    <div class="br-mid">
                        主页
                    </div><!--br-mid-->
                    <div class="br-right">
                    </div><!--br-right-->
                </ins>    
                </a>
            </li>  
            
            <li>
                <a href="blog.html">
                <ins>
                    <div class="br-left"></div>
                    <div class="br-mid">
                        确认订单
                    </div><!--br-mid-->
                    <div class="br-right">
                    </div><!--br-right-->
                </ins>    
                </a>
            </li>
            
           
            <li id="page-title">
                确认订单
            </li><!--page-title-->
        </ul>
        <div id="inner-border"></div>
        <div class="clear"></div>
        <div id="contentwrap-inner">
            
            <div>
                <div>
                    <div style="float:right;">
                        <a class="btn  btn-xs btn-success" href="home" style="margin-right: 35px;">商品页</a>
                        <a class="btn btn-xs btn-info" href="logout">退 出</a>
                    </div>
                    <h2>购物车</h2>
                    <hr>
                </div>
                <form action="/submitOrder" method="post">
                <div class="form-horizontal">

                    <div class="form-group">
                        <label for="inputName" class="col-sm-2 control-label">收货人</label>
                        <div class="col-sm-10">
                            <input type="text" name ="ordername" id="inputName" class="form-control" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputloc" class="col-sm-2 control-label">收货地址</label>
                        <div class="col-sm-10">
                            <input type="text" name ="location" id="inputloc" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputtel" class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-10">
                            <input type="text" name ="tel" id="inputtel" class="form-control">
                        </div>
                    </div>
                    <div >
                        <table class="table table-bordered">
                          <tr>
                              <th>商品</th>
                              <th>价格</th>
                              <th>数量</th>
                          </tr>
                          <% var total = 0; %>
                          <%for(var i in carts){ if(!carts[i].cId)continue%>
                          <tr>
                             <td>
                                 <img class="li-img a img" src="/upload/<%=carts[i].cImgSrc%>" width="20">
                                 <%=carts[i].cName%>
                             </td> 
                             <td><%=carts[i].cPrice%></td>
                             <td><%=carts[i].cQuantity%></td>
                             
                             <%total =total+ carts[i].cPrice*carts[i].cQuantity %>
                          </tr>
                          <%}%>
                        </table>
                        
                        <div style="float: right;height: 35px;width:330px;">
                        
                    
                            总计：<span id="money" style="color: red;font-size: 25px">￥<%= total %>.00</span>
                            <input type="text" id="total" name="total" style="display: none" value="<%= total %>"/>
                            <button style="width: 130px;float:right;" type="submit"  id="del"  class="btn btn-success">提交订单</button>
                        </div>
                    </div>
                    <!-- <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit">录入</button>
                        </div>
                    </div> -->

                </div>
                </form>
                
            </div>
            <div class="clear"></div>
        </div>      
    </div>
<% include ../includes/footer%>
<script>
        $(function(){
            // $('#del').click(
            //     function(e){
            //         var data = { "ordername": $('#inputName').val(), "location":$('#inputloc').val(), "tel": $('#inputtel').val(), "total": $('#total').val()};
            //         $.ajax({
            //             url:'/submitOrder',
            //             type:'post',
            //             data:data,
            //             success:function(data,status){
            //                 // $.ajax({
            //                 //     type:'DELETE',
            //                 //     url:'/submitCart',
            //                 //     success:function(data,status){
            //                 //         if(status == 'success'){
                                        
                                        
            //                 //         }

            //                 //     },
            //                 //     error:function(data,err){
                                    
            //                 //     }
            //                 // });


            //             },
            //             error:function(data,status){

            //             }
            //         });
                    

            //     }
            // )
        })
    </script>
</body>
</html>


